<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-breadcrumb>
              <a-breadcrumb-item href="">
                <a-icon type="home" />
                <span>首页</span>
              </a-breadcrumb-item>
              <a-breadcrumb-item href="">
                <a-icon type="user" />
                <span>招标管理</span>
              </a-breadcrumb-item>
              <a-breadcrumb-item href="">
                <span>
                <template v-if="this.id !== ''"> <a-icon type="edit" />招标</template>
                  <template v-else> <a-icon type="folder-add" />招标添加</template>
                </span>
              </a-breadcrumb-item>
            </a-breadcrumb>
          </a-col>
          <a-col :span="24">&nbsp;</a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-page-search-wrapper">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="16">
            <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-button-group>
                <a-button type="primary" @click="goBack"> <a-icon type="left" />返回 </a-button>
                <a-button type="primary" @click="toSave">保存 <a-icon type="right" /></a-button>
              </a-button-group>
            </a-form-item>
          </a-col>
          <a-col :span="8" :style="{ textAlign: 'right' }">
            <a-form-item>
              <a-button-group>
                <a-button type="primary" :disabled="disabledAudit"  @click="toAudit"> <a-icon type="left" />审批 </a-button>
              </a-button-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">

          <a-col :span="8">
            <a-form-item label="id" hidden="true">
              <a-input v-decorator="['id']" />
            </a-form-item>
            <a-form-item label="招标编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['tenderCode']" placeholder="请输入招标编码"></a-input>
            </a-form-item>
            <a-form-item label="主责部室编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['mainDepartId']" placeholder="请输入主责部室编码"></a-input>
            </a-form-item>
            <a-form-item label="经办人编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['agentId']" placeholder="请输入经办人编码"></a-input>
            </a-form-item>
            <a-form-item label="合同编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['contractId']" placeholder="请输入合同编码"></a-input>
            </a-form-item>
            <a-form-item label="律师审核" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-checkbox v-decorator="['lawyerApproved']"  :disabled="disabledOne" :checked="lawyerApproved" >
                是
              </a-checkbox>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['projectName']" placeholder="请输入项目名称"></a-input>
            </a-form-item>
            <a-form-item label="主责部室名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['mainDepartName']" placeholder="请输入主责部室名称"></a-input>
            </a-form-item>
            <a-form-item label="经办人名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['agentName']" placeholder="请输入经办人名称"></a-input>
            </a-form-item>
            <a-form-item label="合同名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['contractName']" placeholder="请输入合同名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['status']" placeholder="请输入状态"></a-input>
            </a-form-item>
            <a-form-item label="招标清单类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag :value="'请选择'"  :triggerChange="true" dictCode="tenderType"
                                 v-decorator="['tenderType',{ rules: [{ required:true, message: '必填项' }] }]" placeholder="请输入招标清单类型"
                                 @change="handleChange"/>
            </a-form-item>
            <a-form-item label="招标方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag :value="'请选择'"  :triggerChange="true" dictCode="tenderWay"
                                 v-decorator="['tenderWay',{ rules: [{ required:true, message: '必填项' }] }]" placeholder="请输入招标方式"/>
            </a-form-item>
            <a-form-item label="控制价" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['controlPrice']" placeholder="请输入控制价" style="width: 100%"/>
            </a-form-item>
            <a-form-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-button type="primary" @click="" > 附件上传 </a-button>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
          <a-button class="editable-add-btn" @click="handleAdd">添加</a-button>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            class="j-table-force-nowrap">
           <template slot="action" slot-scope="text, record">
              <a @click="() => handleEdit(record)">编辑</a>
              <a-divider type="vertical"/>
              <a-popconfirm title="确定删除吗?" @confirm="() => deleteNow(record)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </template>
          </a-table>
    </div>
    <mms-tender-asset-modal ref="assetForm" @ok="modalFormOk"></mms-tender-asset-modal>
    <mms-tender-material-modal ref="materialForm" @ok="modalFormOk"></mms-tender-material-modal>
   <!-- <mms-contract-asset-modal ref="assetForm" @ok="modalFormOk"></mms-contract-asset-modal>-->
    <!--<mms-contract-material-modal ref="materialForm" @ok="modalFormOk"></mms-contract-material-modal>-->
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@lone/lone-vue/src/utils/mixin'
  import JDate from '@lone/lone-vue/src/components/jeecg/JDate'
  import { postAction, putAction, deleteAction, getAction } from '@lone/lone-vue/src/api/manage'
  import Vue from 'vue'
  import MmsTenderAssetModal from './form/MmsTenderAssetModal'
  import MmsTenderMaterialModal from './form/MmsTenderMaterialModal'
  import MmsContractAssetModal from '../base/form/MmsContractAssetModal'
  import MmsContractMaterialModal from '../base/form/MmsContractMaterialModal'


  export default {
    name: 'MmsTenderCloneDetailsList',
    mixins:[ mixinDevice],
    components: {
      MmsContractMaterialModal,
      MmsContractAssetModal,
      JDate,
      MmsTenderAssetModal,
      MmsTenderMaterialModal
    },
    props:{
      //判断是编辑还是新增
      status:{
        type:String,
        required:false
      },
      //判断是编辑Id
      id:{
        type:String,
        required:false
      },
    },
    watch:{
      status: {
        handler(newVal, oldVal) {
          this.loadFormData()
        },
        immediate: true
      }
    },
    data () {
      return {
        description: 'mms_tender_details管理页面',
        top: 10,
        dateFormat: 'YYYY-MM-DD HH:mm:ss',
        // 表头
        disabledAll: false,
        disabledOne: false,
        editingKey: '',
        dataSource: [],
        form: this.$form.createForm(this),
        model: {},
        disabledAudit: false,
        statusMethod: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules:{
          /*前端校验*/
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'物资编码',
            align:"center",
            dataIndex: 'materialCode'
          },
          {
            title:'物资名称',
            align:"center",
            dataIndex: 'materialName'
          },
          {
            title:'规格型号',
            align:"center",
            dataIndex: 'specs'
          },
          {
            title:'投标单价',
            align:"center",
            dataIndex: 'tenderUnitPrice'
          },
          {
            title:'控制单价',
            align:"center",
            dataIndex: 'controlUnitPrice'
          },
          {
            title:'数量',
            align:"center",
            dataIndex: 'applyNum'
          },
          {
            title:'总金额',
            align:"center",
            dataIndex: 'totalPrice'
          },
          {
            title:'计量单位',
            align:"center",
            dataIndex: 'unit'
          },
          {
            title:'品牌编码',
            align:"center",
            dataIndex: 'brandId'
          },
          {
            title:'品牌名称',
            align:"center",
            dataIndex: 'brandName'
          },
          {
            title:'使用寿命',
            align:"center",
            dataIndex: 'employAge'
          },
          {
            title:'质保期限',
            align:"center",
            dataIndex: 'guaranteePeriod',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'技术参数',
            align:"center",
            dataIndex: 'techPar'
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remarks'
          },
          {
            title: '操作',
            dataIndex: 'id',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        dictOptions:{},
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      handleChange(value) {
        let that = this;
        if(value === 'wz_tender'){
          that.columns.splice(1,1, {
            title:'物资编码',
            align:"center",
            dataIndex: 'material_code'
          });
          that.columns.splice(2,1, {
            title:'物资名称',
            align:"center",
            dataIndex: 'material_name'
          });

        }else if(value === 'asset_tender'){
          that.columns.splice(1,1, {
            title:'资产编码',
            align:"center",
            dataIndex: 'object_class_code'
          });
          that.columns.splice(2,1, {
            title:'资产名称',
            align:"center",
            dataIndex: 'object_class_name'
          });
          that.columns.splice(3,1, {
            title:'设备分类编码',
            align:"center",
            dataIndex: 'classify_code'
          });
          that.columns.splice(4,1, {
            title:'设备分类名称',
            align:"center",
            dataIndex: 'classify_name'
          });
        }
      },

      loadFormData() {
        let that = this;
        this.dataSource = [];
        if(this.status === 'R'){
          that.statusMethod = 'ADD'
        }/*else if(this.status === 'E'){
          that.statusMethod = 'EDIT'
        }*/
        if(this.id !== ''){
          let paramsObject = {id: this.id, statusMethod: that.statusMethod};
          getAction('/ht/mmsTender/queryDetailsById', paramsObject).then((res) => {
            if (res.success) {
              let result = res.result;
              Vue.prototype.$copyProperties(that.form, result,{status: '新建', tenderType: 'wz_tender',
                compileTime: Vue.prototype.$formatDate()}, that.dataSource);
            }
          });
        }else{
          this.$nextTick(function() {
            that.form.setFieldsValue({status: '新建',compileTime: Vue.prototype.$formatDate(),tenderType: 'wz_tender'})
          })
        }
        that.disabledOne = true;
      },
      modalFormOk(record) {
        let that = this;
        if (record && record.id) {
          const newData = [...this.dataSource];
          const target = newData.filter(item => item.id === record.id)[0];
          if(!record['material_code']){
            record['material_code']='';
          }else if(!record['material_name']){
            record['material_name']='';
          }else if(!record['object_class_code']){
            record['object_class_code']='';
          }else if(!record['object_class_name']){
            record['object_class_name']='';
          }else if(!record['classify_code']){
            record['classify_code']='';
          }else if(!record['classify_name']){
            record['classify_name']='';
          }
          newData[newData.indexOf(target)] = record;
          this.dataSource = newData;
        }else{
          record['id'] = '';
          this.dataSource.push(record);
        }
      },
      handleEdit: function (record, params) {
        let tenderType = this.form.getFieldValue('tenderType');
        if(tenderType === 'wz_tender'){
          this.$refs.materialForm.edit(record, params);
          this.$refs.materialForm.title = "编辑";
          this.$refs.materialForm.disableSubmit = false;
        }else if(tenderType === 'asset_tender'){
          this.$refs.assetForm.edit(record, params);
          this.$refs.assetForm.title = "编辑";
          this.$refs.assetForm.disableSubmit = false;
        }
      },
      handleAdd: function (params) {
        let tenderType = this.form.getFieldValue('tenderType');
        if(tenderType === 'wz_tender') {
          this.$refs.materialForm.add(params);
          this.$refs.materialForm.title = "新增";
          this.$refs.materialForm.disableSubmit = false;
        }else if(tenderType === 'asset_tender'){
          this.$refs.assetForm.add(params);
          this.$refs.assetForm.title = "新增";
          this.$refs.assetForm.disableSubmit = false;
        }
      },
      redirect(id){
        let that = this;
        that.$emit('firstStep')
        that.$emit("nextStep",{id:id,status: ''})
        that.$emit("nextStep",{id:id,status: ''})
      },
      toSave(){
        let that = this, paramsObject = {tenderDetails: this.dataSource}
        this.form.validateFields((err,values)=>{
          if (!err) {
            for (let i in values) {
              this.$set(paramsObject, i, values[i]);
            }
            let action = postAction, url = '/ht/mmsTender/addDetails';
            if (that.id) {
              paramsObject['id'] = that.id;
            }
            if (paramsObject.hasOwnProperty('id') && paramsObject['id']) {
              url = '/ht/mmsTender/addDetails';
              action = postAction;
            }
            action(url, paramsObject).then((res) => {
              if (res.success) {
                this.$message.success(res.message);
                let result = res.result;
                if (result) {
                  that.redirect(result['id'])
                }
              } else {
                this.$message.warning(res.message);
                that.redirect(paramsObject['id'])
              }
            }).finally(() => {
            })
          }else{

          }
        })
      },
      deleteNow(record){
        let that = this;
        this.dataSource.splice(this.dataSource.indexOf(record),1);
      },
      goBack(){
        this.$emit('firstStep')
      },
      initDictConfig(){
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>